<template>
   <div class="service-case">
      <loding :show="Isloding"></loding>
      <no-ssr>
        <bread :breadList=breadList></bread>
      </no-ssr>
      <div class="service-case-main">
          <div class="service-case-item"   v-for="(item, key) in listdata" :key=key>
            <div class="case-item-img" @click="toDetail(item.id)">
              <img :src="item.img">
            </div>
            <div class="item-pro-name" @click="toDetail(item.id)">
              {{item.title}}
            </div>
            
            <div @click="toDetail(item.id)" class="item-pro-text" v-html="item.content"></div>
          </div>
      </div>
    </div>
</template>

<script>
import loding from '@/components/loding'
import bread from '@/components/breadcrumb'
import {developCaseList} from '@/api/getData'
export default {
  data() {
    return{
      Isloding: false,
      breadList: [
        {
          text: '软件研发',
          routeName: 'develop-introdution'
        },
        {
          text: '研发案例',
          routeName: 'develop-case'
        }
      ],
      listdata: []
    }
  },
  props: {
    
  },
  created: function () {
    
  },
  mounted: function () {
    this.Isloding = true;
    developCaseList.call(this).then(res=>{
          this.listdata = res;
          this.Isloding = false;
    })
  },
  components: {
    loding,
    bread
  },
  methods: {

    toDetail (id) {
      this.$router.push({
          path: "/develop/detail/"+id
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.service-case{
  width: 1200px;
  padding-top: 20px;
  margin: 0 auto; 
  border-bottom: 1px solid transparent;
}
.service-case-main{
  font-size: 0;
}
.service-case-item{
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  width:216px;
  height:322px;
  overflow: hidden;
  background:rgba(255,255,255,1);
  box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
  margin-right: 30px;
  margin-bottom: 30px;
  // p{
  //   padding: 0 20px;
  //   margin-top: 15px;
  //   font-size:12px;
  //   color:rgba(168,168,168,1);
  //   line-height:26px;
  //   text-overflow: ellipsis;
  //   display: -webkit-box!important;
  //   -webkit-line-clamp: 2;
  //   overflow: hidden;
  //   -webkit-box-orient: vertical;
  // }
}
.service-case-item:nth-child(5n){
  margin-right: 0;
}
.case-item-img{
  width:216px;
  height:162px;
  position: relative;
  overflow: hidden;
  img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all .3s;
  }
  &:hover img{
    transform: scale(1.2)
  }
  &:hover:after{
    position: absolute;
    z-index: 10;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
  }
}
.item-pro-name{
  cursor: pointer;
  height: 72px;
  font-size:14px;
  font-weight:bold;
  color:rgba(30,30,30,1);
  line-height: 28px;
  padding: 13px 20px;
  text-overflow: ellipsis;
  display: -webkit-box!important;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  
}
.item-pro-text{
  cursor: pointer;
  height: 52px;
  padding: 0 20px;
  margin-top: 15px;
  font-size:12px;
  color:rgba(168,168,168,1);
  line-height:26px;
  text-overflow: ellipsis;
  display: -webkit-box!important;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
</style>
